<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Hamburger Icon MI Series - 11</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<button id="menu-toggle">
<svg height="50" width="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<g id="open-cubes">
<g id="top-cubes">
<rect x="12" y="19" width="2" height="2" />
<rect x="12" y="21" width="2" height="2" />
<rect x="14" y="19" width="2" height="2" />
<rect x="14" y="21" width="2" height="2" />
<rect x="16" y="19" width="2" height="2" />
<rect x="16" y="21" width="2" height="2" />
<rect x="18" y="19" width="2" height="2" />
<rect x="18" y="21" width="2" height="2" />
<rect x="20" y="19" width="2" height="2" />
<rect x="20" y="21" width="2" height="2" />
<rect x="22" y="19" width="2" height="2" />
<rect x="22" y="21" width="2" height="2" />
<rect x="24" y="19" width="2" height="2" />
<rect x="24" y="21" width="2" height="2" />
<rect x="26" y="19" width="2" height="2" />
<rect x="26" y="21" width="2" height="2" />
<rect x="28" y="19" width="2" height="2" />
<rect x="28" y="21" width="2" height="2" />
<rect x="30" y="19" width="2" height="2" />
<rect x="30" y="21" width="2" height="2" />
<rect x="32" y="19" width="2" height="2" />
<rect x="32" y="21" width="2" height="2" />
<rect x="34" y="19" width="2" height="2" />
<rect x="34" y="21" width="2" height="2" />
<rect x="36" y="19" width="2" height="2" />
<rect x="36" y="21" width="2" height="2" />
</g>
<g id="bottom-cubes">
<rect x="12" y="27" width="2" height="2" />
<rect x="12" y="29" width="2" height="2" />
<rect x="14" y="27" width="2" height="2" />
<rect x="14" y="29" width="2" height="2" />
<rect x="16" y="27" width="2" height="2" />
<rect x="16" y="29" width="2" height="2" />
<rect x="18" y="27" width="2" height="2" />
<rect x="18" y="29" width="2" height="2" />
<rect x="20" y="27" width="2" height="2" />
<rect x="20" y="29" width="2" height="2" />
<rect x="22" y="27" width="2" height="2" />
<rect x="22" y="29" width="2" height="2" />
<rect x="24" y="27" width="2" height="2" />
<rect x="24" y="29" width="2" height="2" />
<rect x="26" y="27" width="2" height="2" />
<rect x="26" y="29" width="2" height="2" />
<rect x="28" y="27" width="2" height="2" />
<rect x="28" y="29" width="2" height="2" />
<rect x="30" y="27" width="2" height="2" />
<rect x="30" y="29" width="2" height="2" />
<rect x="32" y="27" width="2" height="2" />
<rect x="32" y="29" width="2" height="2" />
<rect x="34" y="27" width="2" height="2" />
<rect x="34" y="29" width="2" height="2" />
<rect x="36" y="27" width="2" height="2" />
<rect x="36" y="29" width="2" height="2" />
</g>
</g>
<g id="close-cubes" transform="rotate(45, 25, 25)">
<g id="vertical-cubes">
<rect x="25" y="13" width="2" height="2" />
<rect x="23" y="13" width="2" height="2" />
<rect x="25" y="15" width="2" height="2" />
<rect x="23" y="15" width="2" height="2" />
<rect x="25" y="17" width="2" height="2" />
<rect x="23" y="17" width="2" height="2" />
<rect x="25" y="19" width="2" height="2" />
<rect x="23" y="19" width="2" height="2" />
<rect x="25" y="21" width="2" height="2" />
<rect x="23" y="21" width="2" height="2" />
<rect x="25" y="23" width="2" height="2" />
<rect x="23" y="23" width="2" height="2" />
<rect x="25" y="25" width="2" height="2" />
<rect x="23" y="25" width="2" height="2" />
<rect x="25" y="27" width="2" height="2" />
<rect x="23" y="27" width="2" height="2" />
<rect x="25" y="29" width="2" height="2" />
<rect x="23" y="29" width="2" height="2" />
<rect x="25" y="31" width="2" height="2" />
<rect x="23" y="31" width="2" height="2" />
<rect x="25" y="33" width="2" height="2" />
<rect x="23" y="33" width="2" height="2" />
<rect x="25" y="35" width="2" height="2" />
<rect x="23" y="35" width="2" height="2" />
</g>
<g id="horizontal-cubes">
<rect x="13" y="23" width="2" height="2" />
<rect x="13" y="25" width="2" height="2" />
<rect x="15" y="23" width="2" height="2" />
<rect x="15" y="25" width="2" height="2" />
<rect x="17" y="23" width="2" height="2" />
<rect x="17" y="25" width="2" height="2" />
<rect x="19" y="23" width="2" height="2" />
<rect x="19" y="25" width="2" height="2" />
<rect x="21" y="23" width="2" height="2" />
<rect x="21" y="25" width="2" height="2" />
<rect x="27" y="23" width="2" height="2" />
<rect x="27" y="25" width="2" height="2" />
<rect x="29" y="23" width="2" height="2" />
<rect x="29" y="25" width="2" height="2" />
<rect x="31" y="23" width="2" height="2" />
<rect x="31" y="25" width="2" height="2" />
<rect x="33" y="23" width="2" height="2" />
<rect x="33" y="25" width="2" height="2" />
<rect x="35" y="23" width="2" height="2" />
<rect x="35" y="25" width="2" height="2" />
</g>
</g>
</svg>
</button>
<script>
const button = document.getElementById("menu-toggle");
const openCubes = Array.from(document.querySelectorAll("#open-cubes rect"));
const closeCubes = Array.from(document.querySelectorAll("#close-cubes rect"));
let locked = false;
const openEffect = (cubes) => {
cubes.forEach((element, index) => {
setTimeout(() => {
element.classList.remove("spin-in");
element.classList.add("spin-out");
}, index * 10);
});
};
const closeEffect = (cubes) => {
cubes.forEach((element, index) => {
setTimeout(() => {
element.classList.remove("spin-out");
element.classList.add("spin-in");
}, index * 10);
});
};
button.addEventListener("click", (e) => {
if (!locked) {
locked = true;
button.classList.toggle("active");
const length = openCubes.length;
if (button.classList.contains("active")) {
openEffect(openCubes);
closeEffect(closeCubes);
} else {
closeEffect(openCubes);
openEffect(closeCubes);
}
setTimeout(() => {
locked = false;
}, 1300 + length * 10);
}
});
</script>
</body>
</html>